<template>
	<view class="course-backview" @click="courseClicked">
		<view class="view-image">
			<img class="course-logo" :src="courseData.subImgUrl" alt="" srcset="" />
			<view class="course-content">
				<view class="course-title">
					{{courseData.dictLabel ? courseData.dictLabel : (courseData.productName ? courseData.productName : courseData.name)}}
				</view>
				<view class="course-english">{{courseData.productEngName}}</view>
			</view>
			<view class="course-rightview">
				<image v-if="courseData.isExpired && courseData.isExpired == 1" class="course-lock"
					src="/static/image/course/course-lock.png" mode=""></image>
				<span v-else>{{rightStr}}</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "lexIconCell",
		props: {
			courseData: {
				type: Object,
			},
			dataIndex: {
				type: Number
			},
			rightStr: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			};
		},
		methods: {
			courseClicked() {
				this.$emit('wordClicked', this.dataIndex)
			}
		}
	}
</script>

<style lang="less">
	.course-backview {
		width: 94%;
		margin-top: 20px;
		overflow: hidden;
		height: 85px;
		border-top-left-radius: 45px;
		border-bottom-left-radius: 45px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		box-shadow: 0px 6px 0px 0px rgb(144, 128, 100);
		background: black;

		.view-image {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 0px 15px;
			box-sizing: border-box;
			background: url(/static/image/homePage/diwen.png);
			background-size: cover;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
	}

	.course-lock {
		width: 30px;
		height: 30px;
	}

	.course-logo {
		width: 60px;
		height: 60px;
		border-radius: 30px;
	}

	.course-star-tag {
		height: 20px;
		border-radius: 10px;
		background-color: #e94851;
		text-align: center;
		margin-top: 5px;
		padding: 0rpx 15px;
	}

	.star {
		width: 15px;
		height: 15px;
		margin: 2px 2px 2px 0;
	}

	.course-content {
		flex: 1;
		margin: 0px 10px;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}

	.course-title {
		width: 100%;
		font-size: 15px;
		color: white;
		font-family: 'hzgb';
	}

	.course-english {
		width: 100%;
		font-size: 10px;
		line-height: 15px;
		margin-top: 5px;
		font-family: 'hzgb';
		color: white;
	}

	.course-tag {
		height: 8px;
		border-radius: 8px;
		background-color: #e94851;
		text-align: center;
		margin-top: 5px;
		line-height: 16px;
		font-size: 8px;
		color: white;
		font-family: 'hzgb';
		padding: 0rpx 15px;
	}

	.course-rightview {
		width: 50px;
		height: 50px;
		border-top-left-radius: 30px;
		border-bottom-left-radius: 30px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		background: linear-gradient(to bottom, #e3b75f, #feef7e);
		color: black;
		font-weight: 900;
		font-size: 18px;
		padding-left: 5px;
		font-family: 'hzgb';
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>